<template>
	<view class="content">
		<view class="top">
			<view class="tabs">
				<view class="tab" :class="{active:tabsIndex == k}" @click="changeTabs(k)" v-for="(v,k) in tabs"
					:key="v.id">{{v.title}}</view>
			</view>
			<image :src="$staticImagePath('common/date.png')" @click="timeRangeShow = true"></image>
		</view>
		<view class="list flex column">
			<view class="list-item" v-for="(v, k) in list" :key="k" @click="onDetail(v)">
				<view class="list-item-top flex just-between align-center">
					<view class="order-sn flex align-center">
						订单编号：{{v.order_no}}
						<text class="copy" @click.stop="$func.copy(v.order_no)">复制</text>
					</view>
					<view class="list-item-top-status" v-if="!v.refund.id">{{state[v.state]}}</view>
					<view class="list-item-top-status" v-else>{{refundState[v.refund.state]}}</view>
				</view>

				<view class="list-item-content flex" v-for="(goods, idx) in v.ordergoods" :key="idx"
					@click.stop="$jump.onGoodsDetail(goods.goods_id)">

					<image class="shop-img" mode="aspectFill" :src="$getImageURL(goods.image)"></image>
					<view class="flex column just-between flex-1">
						<view class="list-item-content-title">{{goods.title}}</view>
						<view v-if="goods.status == 'hidden'" class="text-gray">已下架</view>
						<view class="list-item-content-price flex column">
							<view v-if="goods.discount_price*1>0">优惠:￥{{goods.discount_price}}</view>
							<view class="flex just-between">
								实付:￥{{goods.price}}
								<text class="lite-item-number">X{{goods.number}}</text>
							</view>
						</view>
					</view>

				</view>

				<view class="list-item-bottom flex just-between">
					<view class="">{{v.createtime_text}}下单</view>
					<view class="flex align-center">
						共{{v.pay.number}}件 合计:
						<view class="list-item-bottom-price">¥{{v.pay.order_price}}</view>
					</view>
				</view>
				<view class="flex just-end align-center btn-box">
					<view class="item-btn" v-if="!v.refund.id && v.state == 2" @click.stop="sendGoods(v)">发货</view>

					<template v-if="v.refund.id">
						<view class="refunding flex align-center" v-if="v.refund.state == 0">
							<view class="btn cancel-btn" @click.stop="refundCancel(v)">拒绝</view>
							<view class="btn" @click.stop="refundConfirm(v)">同意</view>
						</view>
					</template>
				</view>
			</view>
			<wanl-empty v-if="!list.length"></wanl-empty>
		</view>
		<view class="time-range flex just-center align-center" v-if="timeRangeShow" @click="timeRangeShow = false">
			<view class="time-box flex column align-center" @click.stop>
				<view class="time-title">选择时间范围</view>
				<view class="range flex align-center">
					<picker mode="date" @change="changeTime($event,'stime')">
						<view>
							<text v-if="!stime" class="text-gray">请选择开始时间</text>
							<text v-else>{{stime}}</text>
						</view>
					</picker>
					~
					<picker mode="date" @change="changeTime($event,'etime')">
						<view>
							<text v-if="!etime" class="text-gray">请选择结束时间</text>
							<text v-else>{{etime}}</text>
						</view>
					</picker>
				</view>
				<view class="btn" @click="timeConfirm">确定</view>
			</view>
		</view>
		<sendGoodsPopupVue v-if="sendGoodsShow" :orderId="selOrderId" @confirm="init()"
			@close="sendGoodsShow = false" />
	</view>
</template>

<script>
	import {
		ShopOrderNoun,
		agreeRefund,
		refuseRefund
	} from '@/API/store'
	import sendGoodsPopupVue from '@/components/mine/sendGoodsPopup.vue'
	export default {
		components: {
			sendGoodsPopupVue
		},
		data() {
			return {
				tabs: [{
					id: '0',
					title: '全部'
				}, {
					id: '1',
					title: '待核销'
				}, {
					id: '2',
					title: '待发货'
				}, {
					id: '3',
					title: '退款售后'
				}],
				tabsIndex: 0,

				list: [],
				page: 1,
				totalPage: 1,

				keyword: '',
				status: '',

				state: {
					1: '待支付',
					2: '待发货',
					3: '待收货',
					4: '待评论',
					5: '售后订单(已弃用)',
					6: '已完成',
					7: '已取消'
				},
				refundState: {
					0: '申请退款',
					1: '卖家同意',
					2: '卖家拒绝',
					3: '申请平台介入',
					4: '成功退款',
					5: '退款已关闭',
					6: '已提交物流',
					7: '第三方退款中',
					8: '退款失败'
				},

				stime: '',
				etime: '',
				timeRangeShow: false,

				sendGoodsShow: false,
				selOrderId: 0
			}
		},
		onPullDownRefresh() {
			this.init()
		},
		onReachBottom() {
			this.getList()
		},
		mounted() {
			this.init()
		},
		methods: {
			onDetail(item) {
				this.$jump.to(`/pages/mine/store/orderDetails?id=${item.id}`)
			},
			
			init() {
				this.sendGoodsShow = false
				this.page = 1;
				this.getList()
			},
			changeTabs(index) {
				this.tabsIndex = index
				this.init()
			},
			getList() {
				if (this.page > this.totalPage) return
				let time = ''
				if (this.stime && this.etime) time = this.stime + ' - ' + this.etime
				ShopOrderNoun({
					page: this.page,
					status: this.tabs[this.tabsIndex].id,
					time
				}).then(res => {
					let list = res.data.data
					if (this.page > 1) {
						list = this.list.concat(list)
					}
					this.list = list
					this.page++
					this.totalPage = res.data.last_page
				}).catch(err => {
					this.page++
				})
			},
			changeTime(e, field) {
				this[field] = e.detail.value
			},
			timeConfirm() {
				this.timeRangeShow = false
				this.init()
			},
			// 发货
			sendGoods(order) {
				this.selOrderId = order.id
				this.sendGoodsShow = true
			},
			// 同意退款
			refundConfirm(item) {
				uni.showModal({
					title: '同意本次退款？',
					success: res => {
						if (res.confirm) {
							agreeRefund({
								ids: item.refund.id
							}).then(res => {
								item.refund.state = 1
							})
						}
					}
				})
			},
			// 拒绝退款
			refundCancel(item) {
				uni.showModal({
					title: '拒绝本次退款？',
					// content: '请填写拒绝理由',
					editable: true,
					placeholderText: '拒绝理由',
					success: res => {
						if (res.confirm) {
							if (!res.content) return this.$st.show('请输入退款理由')
							refuseRefund({
								ids: item.refund.id,
								refuse_content: res.content
							}).then(res => {
								item.refund.state = 2
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}

	.content {
		padding: 20rpx;

		$tabs-height: 100rpx;

		.top {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: $tabs-height;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 28rpx;
			background-color: #f4f4f4;
			z-index: 10;

			.tabs {
				width: 90%;
				height: $tabs-height;
				display: flex;
				justify-content: space-around;
				align-items: center;
				z-index: 10;

				.tab {
					height: $tabs-height;
					line-height: $tabs-height;
					position: relative;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}

				.active {
					color: #EB5C20 !important;
				}

				.tab.active::after {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					bottom: 15rpx;
					margin: auto;
					width: 30rpx;
					height: 6rpx;
					background: linear-gradient(90deg, #DD551B, #F49355);
					border-radius: 3rpx;
				}
			}

			>image {
				width: 40rpx;
				height: 40rpx;
			}

		}

		.list {
			margin-top: $tabs-height;
			padding-bottom: 20rpx;
			gap: 20rpx;

			&-item {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 30rpx 20rpx;

				&-top {
					.order-sn {
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						line-height: 37rpx;
					}

					.copy {
						border-radius: 50rpx;
						border: 1px solid #EB5C20;
						padding: 10rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #EB5C20;
						margin-left: 10rpx;
					}
				}

				&-content {
					padding: 25rpx 0 30rpx;
					border-bottom: 1px solid #EEEEEE;
					gap: 20rpx;

					.shop-img {
						width: 180rpx;
						height: 180rpx;
					}

					&-title {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
					}

					&-price {
						gap: 20rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #121212;
						line-height: 42rpx;
					}

					.lite-item-number {
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						line-height: 37rpx;
					}
				}

				&-bottom {
					margin-top: 30rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					line-height: 40rpx;

					&-price {
						color: #EB5C20 !important;
					}
				}

				.refunding {
					gap: 20rpx;
				}
			}

			.item-btn {
				width: 172rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				background: linear-gradient(90deg, #DD551B, #F49355);
				border-radius: 34rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 30rpx;
			}
		}

		.time-range {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, .5);
			z-index: 11;

			.time-box {
				width: 550rpx;
				padding: 50rpx 0;
				background-color: #FFFFFF;
				border-radius: 20rpx;

				.time-title {
					width: 90%;
					margin: 0 auto;
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
					padding-bottom: 30rpx;
					border-bottom: 1px solid #aaa;
				}

				.range {
					margin: 50rpx 0 100rpx;
					gap: 20rpx;
				}
			}
		}

		.btn-box {
			padding-top: 20rpx;
		}

		.btn {
			padding: 20rpx 80rpx;
			border-radius: 100rpx;
			background: linear-gradient(to right, #f49355, #dd551b);
			color: #FFFFFF;
		}

		.cancel-btn {
			background: #FFFFFF !important;
			border-radius: 34rpx !important;
			border: 1px solid #EDEDED !important;
			color: #888888 !important;
		}
	}
</style>